<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<title><?php echo isset($title) ? $title : ''; ?></title>

<?php
	foreach($styles as $file => $media){
		echo HTML::style($file, array('media' => $media)).PHP_EOL;
	}
?>
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla:400,700">


	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->

	<style type="text/css">
		<!--
		body {
			padding-top: 70px;
			padding-bottom: 30px;
		}

		h1 {
			Text-shadow: 0px 1px #ffffff, 4px 4px 0px #dad7d7;
		}

		.theme-dropdown .dropdown-menu {
			position: static;
			display: block;
			margin-bottom: 20px;
		}

		.theme-showcase > p > .btn {
			margin: 5px 0;
		}

		.row {
			margin-top: 10px;
		}

		-->
	</style>




<?php # Scripts
	foreach($scripts as $file){
		echo HTML::script($file).PHP_EOL;
	}
?>



	<script type="text/javascript">
		$(document).ready(function () {

			<?php
			if(count($preload_images) > 0 ){
			?>

			jQuery.preloadImages = function () {
				if (typeof arguments[arguments.length - 1] == 'function') {
					var callback = arguments[arguments.length - 1];
				} else {
					var callback = false;
				}
				if (typeof arguments[0] == 'object') {
					var images = arguments[0];
					var n = images.length;
				} else {
					var images = arguments;
					var n = images.length - 1;
				}

				var not_loaded = n;



				for (var i = 0; i < n; i++) {
					jQuery(new Image()).attr('src', images[i]).load(function () {
						if (--not_loaded < 1 && typeof callback == 'function') {
							callback();
						}
					});
				}

			};


			$.preloadImages(["<?php echo implode('", "', $preload_images);?>"], function () {
				<?php
				foreach($preload_images as $key => $value){
				$random_time = rand(150, 450);
				?>

				$('#image-<?php echo $key;?>').fadeToggle( <?php echo ceil($random_time/2);?>, function() {
					$('#image-<?php echo $key;?>').attr('src', '<?php echo $value;?>');
						$('#image-<?php echo $key;?>').fadeToggle( <?php echo ceil($random_time/2);?>);
				});
				<?php
				}
				?>
			});

			<?php
			}
			?>

		});
	</script>


</head>
<body>


<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="/">Галлерея изображений</a>
		</div>
		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li><a href="/">Главная</a></li>
				<li><a href="/add">Добавить изображение</a></li>
			</ul>
		</div>
	</div>
</div>


<div class="container theme-showcase" role="main">
	<div class="page-header">
		<h1><?php echo isset($title) ? $title : ''; ?></h1>
	</div>
	<?php
	echo isset($content) ? $content : '';
	?>
</div>


</body>
</html>